<template>
	<view>
		<view class="container">
			<view>
				<!-- 地址 -->
				<view class="address">
					<navigator class="add" url="/pages/address/address" hover-class="none">
						<view style="display: flex;">
							<u-icon name="plus-circle" color="#535353" size=24></u-icon>
							<text style="margin-left: 8rpx;color: #161616;font-size: 32rpx;">设置地址</text>
						</view>
						<u-icon name="arrow-right" color="#A7AAB0" size=16></u-icon>
					</navigator>
				</view>
				<view class="line"></view>
			</view>
			<!-- 商品信息 -->
			<view class="goodInfom">
				<view class="info_title">
					<text>商品信息</text>
				</view>
				<!-- 商品内容 -->
				<view class="info_content">
					<view style="display: flex;">
						<img :src="goodTable.img" alt="">
						<text class="good_name">{{goodTable.name}}</text>
					</view>
				</view>
				<!-- 规格信息 -->
				<view class="sku">
					<text>{{skuContent}}</text>
					<text style="color:#DE3D21">￥{{skuPrice}}</text>
				</view>
				<!-- 购买数量 -->
				<view class="num">
					<text style="margin-top: 8rpx;color:#161616;font-size: 28rpx;">购买数量</text>
					<template>
						<u-number-box v-model="num" @change="valChange"
							color="#161616"
							bgColor="#fff"
							iconStyle="color: #161616;font-size:24rpx">
						</u-number-box>
					</template>
				</view>
				<!-- 备注 -->
				<view class="remark">
					<text style="margin-right: 34rpx;margin-top: 18rpx;">备注</text>
					<u--textarea v-model="remark" placeholder="请输入您的备注信息" autoHeight border=none></u--textarea>
				</view>
			</view>
			<view class="protocol">
				<u-checkbox-group 
				v-model="protocol" 
				@change="checkboxChange"
				shape="circle">
					<u-checkbox
						:customStyle="{marginLeft:'32rpx'}"
						labelColor="#161616"
						labelSize='26rpx'
						label="已阅读并同意"
						:name="name"
					>
					</u-checkbox>
				</u-checkbox-group>
				<text @click="show=true">《用户服务协议》</text>
				<u-modal :show="show" :closeOnClickOverlay='true' :title="title" @confirm="show=false" @close="show=false">
					<view class="slot-content">
									<rich-text :nodes="content"></rich-text>
									
								</view>
				</u-modal>
			</view>
		</view>
		<view style="height: 170rpx;">
			<view class="footer">
				<view class="prompt">
					<text>此为定制套餐，无正当理由不可退改，购买即视为认同此说明及使用规则，如遇使用问题可咨询客服。</text>
				</view>
				<view class="pay">
					<text class="total">合计：<text style="font-size: 34rpx;">{{total}}</text>元</text>
					<navigator class="wx_pay">
						<img src="@/static/wx.png" alt="">
						<text>微信支付</text>
					</navigator>
				</view>
			</view>
	  </view>
	</view>
</template>

<script>
	import { goodsDetail } from '@/api/index.js'
	export default{
		onLoad(option){
			console.log(option)
			let id = option.goodId
			this.choseSkuId = option.choseSkuId
			goodsDetail(id).then(res=>{
				this.goodTable = res
				this.goodTable.sku.forEach((item)=>{
					if(item._id === this.choseSkuId){
						this.skuPrice = item.skuPrice
						this.skuContent = item.skuContent
						this.total = item.skuPrice
					}
				})
				console.log("this.goodTable",this.goodTable)
			})
		},
		data(){
			return{
				goodTable:null,
				choseSkuId:null,
				skuContent:"",
				skuPrice:null,
				num:1,//购买数量
				remark:'',//备注
				total:null,
				protocol:{
					name:"已阅读并同意《用户服务协议》"
				},
				agree:false, //未同意协议 付款时要判断
				show:false ,//用户协议是否显示
				content:`本《用户协议》是您(下称"用户")与中国网财经之间在使用中国网财经出品的各类产品之前
								一重要须知---在签署本协议之前，中国网财经正式提醒用户：
									1.1 您应认真阅读(未成年人应当在监护人陪同下阅读)、充分理解本《用户协议》中各条款
									1.2 除非您接受本协议，否则用户无权也无必要继续接受中国网财经的服务
									1.3 本协议在您开始使用中国网财经的服务，并注册成为中国网财经产品的用户时即产生法律效力`,
				title:"用户服务协议"
			}
		},
		methods: {
			checkboxChange(n) {
				if(n.length){
					this.agree = true
				}
				else{
					this.agree = false
				}
			},
			valChange(num){
				this.total = parseFloat(num.value * this.skuPrice).toFixed(2)
			}
	  }
	}
</script>

<style lang="scss">
	.container{
		margin: 13rpx 20rpx 0;
		.address{
			padding: 50rpx 30rpx;
			background-color: #fff;
			.add{
				display: flex;
				justify-content: space-between;
			}
		}
		.line{
			width: 100%;
			height:6rpx;
			margin-bottom: 15rpx;
			background: url("@/static/line.png");
		}
		.goodInfom{
			margin-bottom: 22rpx;
			background-color: #fff;
			padding-left: 28rpx;
			padding-right: 18rpx;
			.info_title{
				line-height: 85rpx;
				font-size: 30rpx;
				color:#161616;
			}
			.info_content{
				img{
					width: 160rpx;
					height: 160rpx;
					margin-right: 26rpx;
					border-radius: 4rpx;
				}
				.good_name{
					width: 480rpx;
					line-height: 54rpx;
					font-size: 26rpx;
					color: #656565;
				}
			}
			.sku{
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 30rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-top: 2rpx solid #F0F0F0;
				border-bottom: 2rpx solid #F0F0F0; 
				border-radius: 2rpx;
			}
			.num{
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 22rpx;
				.u-number-box__plus.data-v-18418972,
				.u-number-box__minus.data-v-18418972
				{
					width: 52rpx !important;
					height: 52rpx !important;
					border: 1px solid #000;
					border-radius: 4rpx;
				}
			}
			.remark{
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 20rpx;
				color:#161616;
				font-size: 28rpx;
				.placeholder{
					color:red
				}
			}
		}
		.protocol{
			display: flex;
			height: 90rpx;
			font-size: 26rpx;
			line-height: 90rpx;
			background-color: #fff;
			.u-checkbox__icon-wrap.data-v-532d01c7{
				width: 34rpx !important;
				height: 34rpx !important;
				border: 2px dashed #BFBFBF;
			
			}
		}
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		.prompt{
			padding: 10rpx 19rpx;
			line-height: 30rpx;
			background-color: #FFBAAE;
			color: #E15037;
			font-family: monospace;
			font-size: 20rpx;
		}
		.pay{
			display: flex;
			justify-content: flex-end;
			height: 100rpx;
			background-color: #fff;
			.total{
				margin-right: 27rpx;
				line-height: 98rpx;
				font-size: 24rpx;
				color: #DE3D21;
			}
			.wx_pay{
				display: flex;
				justify-content: center;
				width: 266rpx;
				height: 98rpx;
				line-height: 98rpx;
				background-color:#00C55D;
				color: #fff;
				text-align: center;
				font-size: 26rpx;
				img{
					width: 40rpx;
					height: 40rpx;
					margin-top: 28rpx;
					margin-right: 9rpx;
				}
			}
		}
	}
	
	
</style>